<template>
  <div>
    <div class="form-main">
      <div class="input-group">
        <input v-model="real_name" type="text" class="input-default input-realname" :placeholder="$t('请输入姓名')" />
      </div>
      <div class="input-group">
        <input v-model="id_number" type="text" class="input-default input-id-card" :placeholder="$t('请输入身份证号码')" />
      </div>
      <div class="upload">
        <div class="upload-title">{{ $t('请上传身份证照片') }}</div>
        <div class="upload-area">
          <div class="img-default img-id-card-front">
            <input type="file" class="uplode-file" name="id_card_img" @change="uploadImg" />
            <img v-if="id_card_img" :src="downPath + id_card_img" alt="" class="img">
          </div>
          <div class="img-default img-id-card-back">
            <input type="file" class="uplode-file" name="id_card_img2" @change="uploadImg" />
            <img v-if="id_card_img2" :src="downPath + id_card_img2" alt="" class="img">
          </div>
        </div>
      </div>
      <div class="upload">
        <div class="upload-title">{{ $t('请上传手持身份证照片') }}</div>
        <div class="upload-area">
          <div class="img-default img-id-card-handheld">
            <input type="file" class="uplode-file" name="holding_id_card_img" @change="uploadImg" />
            <img v-if="holding_id_card_img" :src="downPath + holding_id_card_img" alt="" class="img">
          </div>
        </div>
      </div>
    </div>
    <div class="form-footer">
      <div class="btn-submit disabled" @click="handleAuthPerson">{{ $t('确定') }}</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      real_name: '',
      id_number: '',
      id_card_img: '',
      id_card_img2: '',
      holding_id_card_img: ''
    }
  },
  computed: {
    ...mapState({
      downPath: ({ imgBaseUrl }) => imgBaseUrl
    })
  },
  methods: {
    ...mapActions({
      getUserInfo: 'auth/getUserInfo',
      uploadPhoto: 'auth/uploadPhoto',
      authPerson: 'auth/authPerson'
    }),
    uploadImg (event) {
      if (this.loading) { return }
      const attr = event.target.name
      const formData = new FormData()
      formData.append('image', event.target.files[0])
      this.loading = true
      this.uploadPhoto(formData)
        .then((data) => {
          this.$toast.success(this.$t('上传成功'))
          this[attr] = data.data.urlPath
        })
        .catch((data) => {
          this.$toast.show(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAuthPerson () {
      if (this.loading) { return }
      do {
        if (this.real_name === '') {
          this.errmsg = this.$t('请输入姓名')
          break
        }
        if (this.id_number === '') {
          this.errmsg = this.$t('请输入身份证号码')
          break
        }
        if (this.id_card_img === '') {
          this.errmsg = this.$t('请上传身份证正面照')
          break
        }
        if (this.id_card_img2 === '') {
          this.errmsg = this.$t('请上传身份证背面照')
          break
        }
        if (this.holding_id_card_img === '') {
          this.errmsg = this.$t('请上传手持身份证照片')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const payload = {
        real_name: this.real_name,
        id_number: this.id_number,
        id_card_img: this.id_card_img,
        id_card_img2: this.id_card_img2,
        id_card_img3: this.holding_id_card_img
      }

      this.loading = true
      this.authPerson(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.getUserInfo()
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.form {
  margin-top: 5px;
}
.input-group {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(238, 238, 238, 0.8);
}
.input-default {
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  border: 1px solid transparent;
  caret-color:#007aff;
  font-size: 14px;
}
.input-realname {
  flex: 1;
}
.input-id-card {
  flex: 1;
}
.form-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.btn-submit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 4px;
}
.btn-submit.disabled {
  opacity: 0.8;
}
.upload {
  margin-top: 0px;
}
.upload-title {
  height: 40px;
  line-height: 40px;
  background-color: #f0f3f8;
  font-size: 14px;
  padding: 0 10px;
  color: #666;
}
.upload-area {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}
.img-default {
  width: 48%;
  height: 100px;
  line-height: 100px;
  position: relative;
  text-align: center;
}
.img-default::before {
  content: '＋';
  color: #776f6f;
  font-weight: 100;
  font-size: 60px;
}
.img-id-card-front {
  background-image: url("~@/assets/images/id-card-front.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.img-id-card-back {
  background-image: url("~@/assets/images/id-card-back.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.img-id-card-handheld {
  background-image: url("~@/assets/images/id-card-handheld.svg");
  background-size: 100% 90%;
  background-repeat: no-repeat;
  background-position: center;
  border: 3px solid #bfbfbf;
  border-radius: 8px;
}
.uplode-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.img-default .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
